<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:shiro="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
<style>
    tr td{padding: 10px;margin: 10px}
    th{text-align: center}
    input[type='number']{width: 100px;height: 30px}
</style>
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <!--<table id="exampleTable" data-mobile-responsive="true">-->
                <!--</table>-->
                <form class="form-horizontal m-t" id="signupForm">
                    <input id="totalScore" type="hidden"  th:value="${totalScore}" class="form-control" >
                    <input id="tptemplateId" type="hidden" name="tptemplateId"  th:value="${tptemplateId}" class="form-control" >
                    <input id="type" type="hidden"  th:value="${type}" class="form-control" >
                    <input id="titleNumber" type="hidden"  th:value="${titleNumber}" class="form-control" >
                    <input id="score" type="hidden" th:value="${score}" class="form-control" >
                <table class="layui-table">
                    <thead>
                    <tr>
                        <!--<th></th>-->
                        <th>知识点</th>
                        <th>题型</th>
                        <th>题目数量(道)</th>
                        <th>分值(分)</th>
                        <th>题型</th>
                        <th>题目数量(道)</th>
                        <th>分值(分)</th>
                        <th>题型</th>
                        <th>题目数量(道)</th>
                        <th>分值(分)</th>
                        <th>总分值(分)</th>
                    </tr>
                    </thead>
                    <tbody id="content">
                    </tbody>
                    <tr>
                        <td colspan="6"  align="right"  style="font-size: 22px">总分值：</td>
                        <td colspan="5" id="alls" align="left"  style="font-size: 22px"></td>
                    </tr>
                    <tr>
                        <td colspan="11" align="center"><button type="submit" class="btn btn-primary">提交</button></td>
                    </tr>
                </table>
                </form>
            </div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<!--<script type="text/javascript" src="/js/webJs/jzweb/templateDetails/templateDetails.js"></script>-->
<script>
    $.validator.setDefaults({
        submitHandler : function() {
            update();
        }
    });
    //拆分数组
    function group(array, subGroupLength) {
        var index = 0;
        var newArray = [];
        while(index < array.length) {
            newArray.push(array.slice(index, index += subGroupLength));
        }
        return newArray;
    }
    $(function () {
        validateRule();
        $.ajax({
            url: "/jzweb/templateDetails/knowss",
            data:{tptemplateId:$("#tptemplateId").val()},
            success: function (r) {
                var titleNumber = $("#titleNumber").val().replace(/\s+/g,"").replace(/\[|]/g,'');
                var score = $("#score").val().replace(/\s+/g,"").replace(/\[|]/g,'');
                var titleNumberList = titleNumber.split(',');
                var titleArray = group(titleNumberList, 3);
                var scoreList = score.split(',');
                var scoreArray = group(scoreList, 3);
                var a='';
                r.data.forEach(function (item, index) {
                    a+='<tr>' +
                            '<td style="display: none"><input type="hidden" name="kpointsId" value="'+item.id+'" /></td>' +
                            '<td>'+item.name+'</td>' +
                            '<td><input type="hidden" name="type" value="0" />单选题</td>' +
                            '<td><input type="number" class="titleNumber'+index+'" name="titleNumber" placeholder="请输入数量" value="'+titleArray[index][0]+'"/></td>' +
                            '<td><input type="number" class="scoreNumber'+index+'" name="score" placeholder="请输入分值" value="'+scoreArray[index][0]+'" /></td>' +
                            '<td><input type="hidden" name="type"  value="1" />多选题</td>' +
                            '<td><input type="number" class="titleNumber'+index+'" name="titleNumber" placeholder="请输入数量" value="'+titleArray[index][1]+'" /></td>' +
                            '<td><input type="number" class="scoreNumber'+index+'" name="score" placeholder="请输入分值" value="'+scoreArray[index][1]+'" /></td>' +
                            '<td><input type="hidden" name="type"  value="2" />判断题</td>' +
                            '<td><input type="number" class="titleNumber'+index+'" name="titleNumber" placeholder="请输入数量" value="'+titleArray[index][2]+'" /></td>' +
                            '<td><input type="number" class="scoreNumber'+index+'" name="score" placeholder="请输入分值" value="'+scoreArray[index][2]+'" /></td>' +
                            '<td class="scores" style="font-weight: bold;font-size: 16px"></td>' +
                        '</tr>'
                });
                $("#content").html(a);
                //计算每行的总分值
                for(var i = 0;i<r.data.length;i++){
                    var subject ='';
                    $('.titleNumber'+i).each(function (index, res) {
                        var numberT = $(this).val();
                        var scoreT = $(this).parent().next().find("input").val();
                        subject =numberT*scoreT*1+subject*1;
                        $(this).parent("td").siblings(".scores").text(subject);
                        // console.log("subject",subject)
                    });
                }
                evaluate();
                //改变题目数量时，重新计算
                $('input[name="titleNumber"]').change(function () {
                    var subject1 ='';
                    var that =$(this);
                    var numberM = that.val();
                    var scoreM = that.parent("td").next().find("input").val();
                    that.parent("td").siblings("td").find('input[name="titleNumber"]').each(function (index, res) {
                        var numberT = $(this).val();
                        var scoreT = $(this).parent("td").next().find("input").val();
                        subject1 =numberT*1*scoreT*1+subject1*1;
                    });
                    that.parent("td").siblings(".scores").text(subject1+numberM*1*scoreM*1);
                    evaluate()
                });
                //改变分值时，重新计算
                $('input[name="score"]').change(function () {
                    var subject1 ='';
                    var that =$(this);
                    var numberM = that.val();
                    var scoreM = that.parent("td").prev().find("input").val();
                    that.parent("td").siblings("td").find('input[name="score"]').each(function (index, res) {
                        var numberT = $(this).val();
                        var scoreT = $(this).parent("td").prev().find("input").val();
                        subject1 =numberT*1*scoreT*1+subject1*1;
                    });
                    that.parent("td").siblings(".scores").text(subject1+numberM*1*scoreM*1);
                    evaluate()
                });
            }
        });
    });
    // 计算总共总分值
    function evaluate() {
        var subjectAll ='';
        $('.scores').each(function (i, res) {
            var numberT = $(this).html();
            subjectAll = numberT*1 +subjectAll*1;
        });
        $("#alls").text(subjectAll);
    }
    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i>";
        $("#signupForm").validate({
            rules : {
                score : {
                    digits:true
                },
                titleNumber : {
                    digits:true
                }
            },
            messages : {
            }
        })
    }
    function update() {
        if(parseInt($("#alls").text())!=parseInt($("#totalScore").val())){
            layer.msg("总分值应等于试卷模板总分"+$("#totalScore").val()+"分，请重新填写！");
            return false
        }
        $.ajax({
            cache : true,
            type : "POST",
            url : "/jzweb/templateDetails/update",
            data : $('#signupForm').serialize(),// 你的formid
            async : false,
            error : function(request) {
                parent.layer.alert("Connection error");
            },
            success : function(data) {
                if (data.code == 0) {
                    parent.layer.msg("操作成功");
                    parent.reLoad();
                    var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
                    parent.layer.close(index);

                } else {
                    parent.layer.alert(data.msg)
                }
            }
        });

    }
</script>
</body>
</html>